<template>
	<view class="shopContainer">
		<view class="shopTitle">
			<view class="text">添加商品属性</view>
		</view>
		<view class="shop-view">
			<fui-form ref="formRef" top="0" :show='false' :model="basicsData" class="from-content">
				<view class="input-view">
					<view class="text">属性名称</view>
					<fui-form-item prop="name">
						<fui-input class="input" :borderBottom="false" :padding="[0]" placeholder="请输入属性名称"
							v-model="basicsData.name" :maxlength="5"></fui-input>
					</fui-form-item>
				</view>
				<view class="input-view">
					<view class="text">属性值</view>
					<fui-form-item prop="value">
						<fui-input class="input" :borderBottom="false" :padding="[0]" placeholder="请输入属性值"
							v-model="basicsData.value"></fui-input>
					</fui-form-item>
				</view>
				<view class="fui-btn__box">
					<fui-button text="取消" class="page-btn btn-back" bold @click="closeStatsPop"></fui-button>
					<fui-button text="确认" class="page-btn" bold @click="submit"></fui-button>
				</view>
			</fui-form>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		inject
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	const modal = inject('$modal');
	const formRef = ref(null)
	const emits = defineEmits(['closeStatsPop'])

	// 初始化表单数据
	const basicsData = ref({
		code: Date.now(),
		name: '',
		value: '',
	});

	const initPricesData = () => {
		basicsData.value = {
			code: Date.now(),
			name: '',
			value: '',
		}
	}

	// 定义验证规则
	const rules = [{
		name: "name",
		rule: ["required"],
		msg: ["请输入属性名称"]
	}, {
		name: "value",
		rule: ["required"],
		msg: ["请输入属性值"]
	}, ];

	// 提交表单方法
	const submit = async () => {
		// 获取fui-form组件实例
		let options = {}
		try {
			// 调用validator方法并传入所需参数
			const res = await formRef.value.validator(basicsData.value, rules);
			if (res.isPassed) {
				emits('closeStatsPop', basicsData.value)
				initPricesData();
			} else {
				modal.msgError(res.errorMsg);
			}
		} catch (err) {
			console.log(err);
		}
	}
	const closeStatsPop = () => {
		emits('closeStatsPop')
	}
</script>

<style lang="scss">
	.shopContainer {
		position: fixed;
		width: 100%;
		height: 100%;
		bottom: 0;
		padding: 32rpx 60rpx 32rpx 40rpx;
		box-sizing: border-box;
		font-family: PingFang SC, PingFang SC;
		color: #333333;
		background-color: #ffffff;
		border-radius: 24rpx 24rpx 0 0;

		.shopTitle {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;
		}

		.shop-view {
			height: calc(100% - 80rpx);
			overflow-y: auto;

			.input-view {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 32rpx;

				.text {
					display: block;
					width: 200rpx;
					text-align: right;
					margin-right: 24rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
				}

				:deep(.fui-form__item-bottom) {
					display: none !important;
				}

				:deep(.fui-form__item-outer) {
					padding-top: 20rpx !important;
					padding-bottom: 16rpx !important;
					background: #f6f6f6 !important;
					border-radius: 8rpx;
					overflow: hidden;
				}

				:deep(.fui-input__wrap) {
					background: #f6f6f6 !important;
				}

				:deep(.uni-input-placeholder) {
					font-size: 28rpx !important;
					font-weight: 400;
					color: #999999;
				}
			}

		}

		.fui-btn__box {
			width: calc(100% - 32rpx);
			padding: 40rpx 0rpx 0;
			margin-left: 32rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;

			.page-btn {
				width: calc(50% - 16rpx) !important;
				height: 88rpx !important;
				line-height: 88rpx !important;
				flex: none;

				:deep(.fui-button__primary) {
					height: 88rpx !important;
					line-height: 88rpx !important;
				}
			}

			.btn-back {
				:deep(.fui-button__primary) {
					background-color: #ffffff !important;
					color: var(--fui-color-primary) !important;
					border: 1PX solid var(--fui-color-primary) !important;

					.fui-text__bold {
						color: var(--fui-color-primary) !important;
					}
				}
			}
		}

		.input {
			font-weight: 400;
		}
	}
</style>